<template>
  <el-dialog append-to-body="true" title="日历信息" style="width: 1150px;">
    <div>
      <!-- user.todaylist  直接使用 不要再重新定义 否则先我一步 -->
      <el-table :data="user.todaylist" style="width: 1100px">
        <el-table-column fixed prop="startDate" label="时间" width="200" />
        <el-table-column prop="theme" label="主题" width="150" />
        <el-table-column prop="content" label="内容" width="200" />
        <el-table-column prop="address" label="地点" width="100" />
        <el-table-column prop="partner" label="搭档" width="100" />
        <el-table-column prop="type" label="类别" width="100" />
        <el-table-column prop="status" label="完成" width="100">
          <!-- 状态改变 -->
          <template #default="scope">
            <el-switch v-model="scope.row.status" inline-prompt
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" :active-value="1"
              :inactive-value="0" active-text="是" inactive-text="否" @click="change(scope.row.id, scope.row.status)" />
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button link type="primary" size="small"
              @click="edit(scope.row.id, scope.row.startDate.substring(0, 10))">编辑</el-button>
            <el-button link type="primary" size="small"
              @click="del(scope.row.id, scope.row.startDate.substring(0, 10))">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 修改页面 Start -->
    <!-- z-index 弹窗层级 -->
    <el-dialog v-model="visible" title="修改待办">
      <div>
        <a-form ref=" formRef" :model="form" :style="{ width: '480px' }" @submit="handleSubmit">
          <a-form-item field="theme" label="主题" :rules="[{ required: true, message: '请填写主题' }, { message: '输入待办主题' }]"
            :validate-trigger="['change', 'input']">
            <a-input v-model="form.theme" placeholder="输入待办主题" />
          </a-form-item>
          <a-form-item field="content" label="待办内容"
            :rules="[{ required: true, message: '请填写内容' }, { message: '输入待办事项' }]"
            :validate-trigger="['change', 'input']">
            <a-input v-model="form.content" placeholder="输入待办事项" />
          </a-form-item>
          <!--  <a-form-item label="时间">
            <a-range-picker v-model="form.date" style="width: 420px; margin: 0 24px 24px 0;" show-time
              format="YYYY-MM-DD HH:mm" @select="onSelect" @ok="onOk" />
          </a-form-item> -->

          <!-- Elements 日期选择组件 -->
          <a-form-item label="时间">
            <div class="block">
              <el-date-picker style="width: 380px;background-color:#F2F3F5" v-model="form.date" @change="onOk"
                type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss" range-separator="-" start-placeholder="开始时间"
                end-placeholder="结束时间" />
            </div>
          </a-form-item>



          <a-form-item field="address" label="地点" :rules="[{ required: true, message: '请填写地点' }, { message: '输入地点' }]"
            :validate-trigger="['change', 'input']">
            <a-input v-model="form.address" placeholder="输入地点" />
          </a-form-item>

          <a-form-item label="选择搭档">
            <el-select v-model="form.section" placeholder="选择" style="background-color:#F2F3F5">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </a-form-item>
          <!-- <a-form-item field="section" label="搭档" style="top: -20px;" :rules="[{ message: 'must select one' }]">
            <a-select v-model="form.section" placeholder="请选择搭档">
              <a-option value="">不选</a-option>
              <a-option value="张三">张三</a-option>
              <a-option value="李四">李四</a-option>
              <a-option value="王五">王五</a-option>
            </a-select>
          </a-form-item> -->
          <a-form-item field="radio" label="类别" :rules="[{ message: 'must select one' }]">
            <a-radio-group v-model="form.radio">
              <a-radio value="生活">生活</a-radio>
              <a-radio value="娱乐">娱乐</a-radio>
              <a-radio value="工作">工作</a-radio>
              <a-radio value="学习">学习</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item>
            <a-space>
              <a-button html-type="submit">提交</a-button>&nbsp&nbsp
              <!-- <a-button @click="$refs.formRef.resetFields()">重置</a-button> -->
            </a-space>
          </a-form-item>
        </a-form>
      </div>
    </el-dialog>
    <!-- 修改页面 END -->

  </el-dialog>
</template>
<script  lang="ts" setup>
import { reactive } from 'vue';
import { ref, computed } from 'vue'
import userCount from '@/stores/userCount.js'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'

/* 状态 */
/* const value2 = ref(false) */

let startDate = ref('0')
let endDate = ref('0')


function onOk(dateString) {
  startDate = dateString[0],
    endDate = dateString[1]
  console.log(startDate)
  console.log(endDate)
}


const value1 = ref<[Date, Date]>([
  new Date(),
  new Date()
])


const value2 = ref('')

const options = [
  {
    value: '',
    label: '不选',
  },
  {
    value: '张三',
    label: '张三',
  },
  {
    value: '李四',
    label: '李四',
  },
  {
    value: '王五',
    label: '王五',
  }
]
const change = (id, status) => {
  if (status == '1') {
    axios.put('http://localhost:8080/content/updateStatus', { "id": id, "userId": user.userid, "status": status }).then(resp => {
      user.todolist = resp.data
    })
  } else {
    axios.put('http://localhost:8080/content/updateStatus', { "id": id, "userId": user.userid, "status": status }).then(resp => {
      user.todolist = resp.data
    })
  }
}



const user = userCount()

/* 修改页面是否可见 */
let visible = ref(false)
let form = reactive({
  theme: '',
  content: '',
  address: '',
  section: '',
  date: ['', ''],
  time: '',
  radio: ''
});


/* let startDate = ref('0')
let endDate = ref('0')


function onOk(dateString) {
  startDate = dateString[0],
    endDate = dateString[1]
  console.log(startDate)
  console.log(endDate)
}
 */

/* 删除操作 */
const del = (id, day) => {
  ElMessageBox.confirm(
    '确定删除吗?',
    '消息',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      /* 删除请求 */
      axios.post('http://localhost:8080/content/deleteTodo',
        { "id": id, "userId": user.userid }).
        then(resp => {
          /* 再查当天  让试图即时更新*/
          axios.post('http://localhost:8080/content/findTodayList',
            { "userId": user.userid, "startDate": day }).then(resp => {
              user.todaylist = resp.data
            })
          user.todolist = resp.data
        })

      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}
const todoid = ref('')
/* 打开修改页面 */
const edit = (id, day) => {
  /*  user.show = false */
  visible.value = true
  todoid.value = id
  console.log(todoid.value);
  axios.get('http://localhost:8080/content/findById/' + id).then(resp => {
    user.updatelist = resp.data
    console.log(user.updatelist);
    /* 数据回显 */
    form.theme = user.updatelist.theme
    form.content = user.updatelist.content
    form.address = user.updatelist.address
    form.section = user.updatelist.partner
    form.date[0] = user.updatelist.startDate
    form.date[1] = user.updatelist.endDate
    form.radio = user.updatelist.type
  })
  visible.value = true
  console.log('edit')
  console.log(id)
}

/* 提交修改代办 */
const handleSubmit = ({ values, errors }) => {
  console.log(values);
  axios.put('http://localhost:8080/content/updateTodo', {
    "id": todoid.value,
    "theme": values.theme,
    "content": values.content,
    "address": values.address,
    "startDate": values.date[0],
    "endDate": values.date[1],
    "type": values.radio,
    "partner": values.section
  }).then(resp => {
    axios.post('http://localhost:8080/content/findTodayList',
      { "userId": user.userid, "startDate": user.day }).then(resp => {
        /* 今天日期 */
        console.log(user.day);
        /* end */
        user.todaylist = resp.data

        /* 再获取所有数据 可能修改了时间 */

        axios.post('http://localhost:8080/content/todo/' + user.userid).then(resp => {
          user.todolist = resp.data
        })

      })
  })
  ElMessage({
    message: '修改成功',
    type: 'success',
  })
  visible.value = false
}

const todolist = reactive(user.todolist)

</script>
<style scoped>

</style>
